<template>
  <view :class="{'v-picker': true, 'show': show}">
    <view class="v-picker-mask" @tap="bindCancel"></view>
    <view class="v-picker-wrapper" ref="wrapper">
      <view class="v-picker-header">
        <text class="v-picker-header__cancel action" @tap="bindCancel">取消</text>
        <text class="v-picker-header__confirm action" @tap="bindConfirm">完成</text>
      </view>
      <view class="v-picker-content">
        <picker-view ref="picker" :value="value" @change="bindChange" class="picker-view">
          <slot></slot>
        </picker-view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      value: {
        type: [Array],
        default: () => []
      },
      visible: {
        type: Boolean,
        default: false
      },

    },
    data() {
      return {
        show: this.visible,
        val: null
      }
    },
    computed: {
      current() {
        if (!this.val) {
          return 0
        }
        return this.val.detail.value[0]
      }
    },
    watch: {
      visible(val) {
        if (val) {
          this.open()
        } else {
          this.close()
        }
      },
      show(val) {
        this.$emit('update:visible', val)
      }
    },
    methods: {
      hasClass(el, cls) {
        if (!el || !cls) return false
        if (cls.indexOf(' ') !== -1)
          throw new Error('className should not contain space.')
        if (el.classList) {
          return el.classList.contains(cls)
        } else {
          return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1
        }
      },
      addClass(el, cls) {
        if (!el) return
        let curClass = el.className
        const classes = (cls || '').split(' ')

        for (let i = 0, j = classes.length; i < j; i++) {
          const clsName = classes[i]
          if (!clsName) continue

          if (el.classList) {
            el.classList.add(clsName)
          } else {
            if (!this.hasClass(el, clsName)) {
              curClass += ' ' + clsName
            }
          }
        }
        if (!el.classList) {
          el.className = curClass
        }
      },
      removeClass(el, cls) {
        if (!el || !cls) return
        const classes = cls.split(' ')
        let curClass = ' ' + el.className + ' '

        for (let i = 0, j = classes.length; i < j; i++) {
          const clsName = classes[i]
          if (!clsName) continue

          if (el.classList) {
            el.classList.remove(clsName)
          } else {
            if (this.hasClass(el, clsName)) {
              curClass = curClass.replace(' ' + clsName + ' ', ' ')
            }
          }
        }
        if (!el.classList) {
          el.className = trim(curClass)
        }
      },
      bindChange(val) {
        this.val = val
        this.$emit('change', val)
      },
      bindConfirm() {
        console.log('current', this.current);
        this.$emit('confirm', this.current)
        this.close()
      },
      bindCancel() {
        this.$emit('cancel')
        this.close()
      },
      close() {
        this.show = false
      },
      open() {
        this.show = true
      }
    }
  }
</script>
<style lang="scss">
  .v-picker {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    z-index: -99;
    font-size: 16px;
    // display: none;

    &-mask {
      position: fixed;
      z-index: 999;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .5);
      opacity: 0;
    }

    &-wrapper {
      position: fixed;
      left: 0;
      bottom: 0;
      backface-visibility: hidden;
      z-index: 999;
      width: 100%;
      background-color: #efeff4;
      transition: all .3s, visibility .3s, -webkit-transform .3s;
      transform: translateY(100%);

      &.slide {
        transform: translate(0);
        visibility: visible;
      }
    }

    &-header {
      display: block;
      position: relative;
      text-align: center;
      width: 100%;
      height: 45px;
      background-color: #fff;

      .action {
        display: block;
        max-width: 50%;
        top: 0;
        height: 100%;
        box-sizing: border-box;
        padding: 0 14px;
        font-size: 17px;
        line-height: 45px;
        overflow: hidden;
        cursor: pointer;
      }

      &__cancel {
        float: left;
        color: #888;
      }

      &__confirm {
        float: right;
        color: $uni-color-primary;
      }
    }

    &-content {
      position: relative;
      display: block;
      width: 100%;
      height: 238px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    &.show {
      z-index: 999;

      .v-picker {
        &-mask {
          opacity: 1;
        }

        &-wrapper {
          transform: translate(0);
          visibility: visible;
        }
      }
    }

    .picker-view {
      width: 100%;
      height: 100%;
    }

  }
</style>